<template>
  <div class="win">
    <div class="head_box_space"></div>
    <div class="head_box">
      <div class="row">
        <img src="/static/img/search_icon.png" class="search_icon" alt />
        <input
          type="text"
          confirm-type="search"
          @confirm="searchGood"
          v-model="searchText"
          placeholder-style="color:#ADADAD"
          placeholder="点击输入搜索内容"
        />
      </div>
      <p @click="hr_addStaff" class="add_btn">添加员工</p>
    </div>
    <div class="staff_box">
      <div class="item" v-for="(item, index) in staffData" :key="index">
        <p class="name">{{item.name}}</p>
        <p class="post">{{item.job}}</p>
        <p class="phone">{{item.phone}}</p>
        <p class="edit_btn" @click="hr_editStaff(item.staff_id)">编辑</p>
      </div>
    </div>
    <noData v-if="staffData==''"></noData>
    <i-toast id="toast" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      bjurl: "",
      staffData: [],
      searchText: ""
    };
  },
  methods: {
    // 请求接口员工管理列表
    getStaffData() {
      this.$ajax("/home/staff/index", "post", {
        keyword: this.searchText
      })
        .then(res => {
          if (res.status) {
            this.staffData = res.data;
          } else {
            this.staffData = "";
          }
        })
        .catch(err => {});
    },
    // 确认搜索
    searchGood() {
      this.getStaffData();
    },
    // 跳转到添加员工
    hr_addStaff() {
      wx.navigateTo({
        url: "../addStaff/main?type=" + 0
      });
    },
    // 跳转到编辑员工
    hr_editStaff(staff_id) {
      wx.navigateTo({
        url: "../addStaff/main?type=" + 1 + "&staff_id=" + staff_id
      });
    }
  },
  onShow(){
    this.getStaffData();
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
  }
};
</script>

<style lang="scss" scoped>
.win {
  .head_box_space {
    height: 135rpx;
  }
  .head_box {
    z-index: 6;
    box-shadow: -1rpx 7rpx 9rpx 0rpx rgba(169, 169, 169, 0.14);
    box-sizing: border-box;
    width: 750rpx;
    height: 116rpx;
    z-index: 5;
    left: 0;
    right: 0;
    position: fixed;
    top: 0;
    padding: 0 30rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .row {
      display: flex;
      width: 518rpx;
      height: 55rpx;
      border-radius: 28rpx;
      padding-left: 26rpx;
      background-color: #ffffff;
      box-shadow: 3rpx 4rpx 6rpx 0rpx rgba(0, 0, 0, 0.1),
        0rpx 0rpx 5rpx 0rpx rgba(0, 0, 0, 0.1);
      overflow: hidden;
      align-items: center;
      box-sizing: border-box;
      font-size: 24rpx;
      .search_icon {
        width: 22rpx;
        height: 25rpx;
      }
      input {
        padding-left: 20rpx;
        height: 100%;
        flex: 1;
      }
    }
    .add_btn {
      height: 60rpx;
      width: 140rpx;
      color: $green;
      font-size: 30rpx;
      line-height: 60rpx;
      text-align: right;
      text-decoration: underline;
    }
  }
  .staff_box {
    .item {
      background-color: #ffffff;
      margin-bottom: 10rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 106rpx;
      padding: 0 30rpx;
      color: #4d4d4d;
      font-size: 32rpx;
      .name {
        width: 20%;
        text-align: left;
      }
      .post {
        width: 34%;
        text-align: center;
      }
      .phone {
        width: 34%;
        text-align: center;
      }
      .edit_btn {
        width: 12%;
        color: $green;
        font-size: 28rpx;
        text-decoration: underline;
        text-align: right;
      }
    }
  }
}
</style>
